<template>
  <div>
    <el-dialog
      title="选择授课模式"
      :visible.sync="visible"
      :close-on-click-modal="false"
      :width="dialogWidth"
      center
      @close="handleClose"
    >
      <div class="dialog-content-wrapper">
        <div class="teaching-mode-grid">
          <div
            v-for="(mode, index) in teachingModes"
            :key="index"
            class="teaching-mode-card"
            @click="handleModeSelect(mode)"
          >
            <div class="mode-icon" v-html="mode.icon"/>
            <div class="mode-name">{{ mode.name }}</div>
            <div class="mode-desc">{{ mode.description }}</div>
          </div>
        </div>
      </div>
    </el-dialog>

    <course-info-dialog
      v-if="courseInfoDialog"
      :visible="courseInfoDialog"
      :course-type="courseType"
      :selected-mode="modeName"
      @confirm="courseInfoDialog=false"
    />
  </div>
</template>

<script>
import CourseInfoDialog from '@/views/course/component/courseTeach/CourseInfoDialog.vue'

export default {
  name: 'TeachingModeDialog',
  components: { CourseInfoDialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    courseType: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      teachingModes: [
        {
          name: '传统模式',
          icon: '<i class="fas fa-chalkboard-teacher"></i>',
          description: '兼容市场主流的授课模式'
        },
        {
          name: '创意模式',
          icon: '<i class="fas fa-lightbulb"></i>',
          description: '通过情境、游戏等创新方式学习单词'
        }
      ],
      courseInfoDialog: false,
      modeName: ''
    }
  },
  computed: {
    // 根据屏幕宽度动态调整对话框宽度
    dialogWidth() {
      const screenWidth = window.innerWidth
      if (screenWidth < 768) {
        return '90%'
      } else if (screenWidth < 1200) {
        return '70%'
      } else {
        return '600px' // 大屏幕固定最大宽度
      }
    }
  },
  methods: {
    handleModeSelect(mode) {
      if (mode.name === '创意模式') {
        this.$notify.success('敬请期待...')
        return
      }
      this.handleClose()
      this.courseInfoDialog = true
      this.modeName = mode.name
    },
    handleClose() {
      this.$emit('close')
    }
  }
}
</script>

<style scoped>
.dialog-content-wrapper {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}

.teaching-mode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: 550px; /* 限制内容最大宽度 */
}

.teaching-mode-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 200px; /* 确保卡片高度一致 */
  justify-content: center;
}

.teaching-mode-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 132, 255, 0.15);
  border-color: #0084ff;
  background-color: rgba(0, 132, 255, 0.03);
}

.mode-icon {
  font-size: 36px;
  margin-bottom: 16px;
  color: #0084ff;
  transition: transform 0.3s ease;
}

.teaching-mode-card:hover .mode-icon {
  transform: scale(1.1);
}

.mode-name {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.mode-desc {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  padding: 0 4px;
}

/* 针对大屏幕的额外优化 */
@media screen and (min-width: 1200px) {
  .el-dialog {
    max-width: 600px !important;
  }
}
</style>
